<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>erp进销存系统</title>
	<link rel="stylesheet" href="../../static/css/style.css" th:href="@{http://localhost:8080/css/style.css}">
	<link rel="stylesheet" href="../../static/layui/css/layui.css"
		  th:href="@{http://localhost:8080/layui/css/layui.css}">
	<script src="../../static/layui/layui.js" th:src="@{http://localhost:8080/layui/layui.js}"></script>
	<script src="../../static/js/jquery.js"
			th:src="@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}"></script>

	<script src="../../static/js/man/storage.js" th:src="@{http://localhost:8080/js/man/storage.js}"></script>
	<link rel="stylesheet" href="../../static/css/man/storage.css"
		  th:href="@{http://localhost:8080/css/man/storage.css}">
</head>
<body>
<div>
	<h3 style="font-size: 25px;">库存信息</h3>
	<hr>
	<datalist id="variety_data">
		<option th:each="variety :${varieties}" th:text="${variety}"></option>
	</datalist>
	<datalist id="type_data">
		<option th:each="variety :${varieties}" th:text="${variety}"></option>
	</datalist>
	<datalist id="standard_data">
		<option th:each="variety :${varieties}" th:text="${variety}"></option>
	</datalist>
	<input type="text" id="variety_ipt" class="storage_ipts" list="variety_data" placeholder="请选择或输入产品名称">
	<input type="text" id="type_ipt" class="storage_ipts" list="type_data" placeholder="请选择或输入型号">
	<input type="text" id="standard_ipt" class="storage_ipts" list="standard_data" placeholder="请选择或输入规格">
	<hr>

	<table id="storage_table" class="layui-table" lay-filter="product">

	</table>




	<script>

		var tableProduct;

		$("#variety_ipt,#type_ipt,#variety_ipt").on("focus", function () {
			$(this).val("");
		})

		$("#variety_ipt").on("blur",function (){
			var variety = $(this).val();
			$.post("/storage/getTypesName",{variety:variety},function (data){
				$("#type_data").empty();
				for (var i in data) {
					var type = data[i];
					$("#type_data").append("<option value='"+type+"'></option>");
				}
			})
		})

		$("#type_ipt").on("blur",function (){
			var type = $(this).val();
			$.post("/storage/getStandardsName",{type:type},function (data){
				$("#standard_data").empty();
				for (var i in data) {
					var standard = data[i];
					console.log("standard  ==  "+standard);
					$("#standard_data").append("<option value='"+standard+"'></option>");
				}
			})
		})


		$("#variety_ipt").on("change", function () {
			var variety = $(this).val();
			tableProduct.reload({
				url: '/storage/findStorageByCondition/', //数据接口
				where: {variety: variety},
				pae: {curr: 1}
			})
		})

		$("#type_ipt").on("change", function () {
			var variety = $("#variety_ipt").val()
			console.log($(this).val());
			var type = $(this).val();
			tableProduct.reload({
				url: '/storage/findStorageByCondition/', //数据接口
				where: {variety:variety,type:type},
				page: {curr: 1}
			})
		})

		$("#standard_ipt").on("change", function () {
			var variety = $("#variety_ipt").val()
			var type = $("#type_ipt").val()
			var standard = $(this).val();
			tableProduct.reload({
				url: '/storage/findStorageByCondition/', //数据接口
				where: {variety:variety,type:type,standard:standard},
				page: {curr: 1}
			})
		})

		layui.use('table', function () {
			var table = layui.table;
			//第一个实例
			tableProduct = table.render({
				elem: '#storage_table',
				url: '/storage/allList/', //数据接口
				page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['prev', 'page', 'next', 'count', 'skip'] //自定义分页布局
					//,curr: 5 //设定初始在第 5 页
					, groups: 5 //只显示 1 个连续页码
					, limit: 10
				},
				cols: [
					[//表头
						{field: 'id', title: 'ID', sort: true, fixed: 'left'}
						, {field: 'variety', title: '产品名称'}
						, {field: 'type', title: '型号'}
						, {field: 'standard', title: '规格'}
						, {field: 'count', title: '数量'}
					]
				],
			});
		});
	</script>


</div>
</body>
</html>